<template>
    <div>
        <div class="Workdetailsbox">
            <div style="height: .98rem">
                <div class="toptools">
                    <div class="toptools">
                        <svg @click="$router.back()" t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#ffffff" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#ffffff" p-id="2286"></path></svg>
                        <span>作品详情</span>
                        <img src="@/assets/images/分享.png" alt="">
                    </div>
                </div>
            </div>

            <div v-if="!loading">
                <div v-loading="loading" v-for="(o, i) in list" :key="i">
                    <!-- 作品展示 -->
                    <div class="work">
                        <el-image  style="width: 7.5rem;" :preview-src-list="srcList" :src="require('../../../server/public/images/class/' + o.img)" alt=""></el-image>>
                        <div class="text">
                            <h2>{{ o.name }}</h2>
                            <p>{{ o.painter }}</p>
                        </div>
                    </div>
                    <div class="tools">
                        <span class="iconfont icon-yinliang"></span>
                        <span class="iconfont icon-pinglun"></span>
                        <span class="icon-dianzan iconfont"></span>
                    </div>
                    <!-- 详情-->
                    <div class="introduction">
                        <div class="content">
                            <p>{{ o.introduce }}</p>
                        </div>
                        <div class="zhankai">
                            <span>展开详情</span>
                        </div>
                    </div>
                    <div class="workdetails">
                        <h2>作品介绍</h2>
                        <p>名称：{{ o.name }}</p>
                        <p>英文名称：{{ o.englishname }}</p>
                        <p>创作者：<span>{{ o.painter}}</span></p>
                        <p>创作日期：{{ o.creationtime }}</p>
                        <p>实际尺寸： {{ o.size }}</p>
                        <p>风格：{{o.style}}</p>
                        <p>材质：{{ o.texture }}</p>
                        <p>位于：{{ o.site }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { workDetails } from '@/api/workDetails'


export default {
    name: 'Vue2Workdetails',
    props:['id'],
    data() {
        return {
            loading: true,
            srcList: [require('../../../server/public/images/class/春天.jpg')],
            list: [
                {}
            ]
        };
    },
    
    computed: {
        
    },
    mounted() {
        setTimeout(() => {
            workDetails(this.id).then((res)=>{
                console.log(res.data);
                this.list = res.data
                this.loading = false
            })
        }, 300);
    },

    methods: {
        
    },
};
</script>

<style lang="scss">
@import '@/assets/css/pub/workDetails.scss'
</style>